<template>
	<view class="localdetail">
		<u-swiper :list="petmarket.swiperList" @click="clickSwiper" height="580" imgMode="aspectFit"></u-swiper>
		<!-- <image src="../../static/logo.png" mode="aspectFit" ></image> -->
		<view class="content relative">
			<view class="pl-36 mtb-12">
				<view class="name" v-if="show">
					【 宠物品种 】 ：{{petmarket.type}}
				</view>
				<view class="name" v-else>
					【 宠物品种 】 ：{{petmarket.race}}
				</view>
				<block v-if="show">
					<view class="date">
						【 是否有偿 】：{{petmarket.money}} 元
					</view>
				</block>
				<block v-else>
					<view class="date">
						【 价格 】：{{petmarket.money}} ￥
					</view>
				</block>
			</view>
			<view class="detailbox " style="margin-bottom: 30rpx;">
				宠物细节描述:{{petmarket.note}}
			</view>
			<view  style="background-color: black;"  v-if="petmarket.videoSrc">
				<view class="text mtb-12 pl-24" style="color: white;font-size: 50rpx;" >
					宠物视频
				</view>
				<video :src="petmarket.videoSrc"  style="width: 100%;" controls></video>
			</view>
			<view class="section">
				<view class="text">
					评论区
				</view>
				<block v-if="petmarket.session">
					<sectioncom :list="petmarket.session"></sectioncom>
				</block>
			</view>
			<view class="metalk flex bt">
				<input type="text" class="input" placeholder="我来说两句" confirm-type="send" :value="text" @confirm="sendMsg" />
				<view style="width: 200rpx;padding-top: 10rpx;">
					<u-button type="warning" text="联系它主人" @click="concat" v-if="show"></u-button>
					<u-button type="success" text="去购买" @click="buy" v-else></u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import sectioncom from "../section/section.vue"
	export default {
		data() {
			return {
				list1: [
					// '/static/banner/1.jpg',
					// '/static/banner/2.jpg',
					// '/static/banner/3.jpg',
				],
				text: "",
				show: false,
				id: '',
				petmarket: {}
			};
		},
		onLoad(props) {
			// console.log(props)
			if (props.type == "ly") {
				this.show = true
			} else {
				this.show = false
			}
			this.id = props.id
			// this.$db.collection('swiperList').limit(10).get().then(res => {
			// 	this.list1 = res.data.map(item => item.src)
			// 	console.log(this.list1, 'client')
			// })
			this.getData()
		},
		methods: {
			clickSwiper(e) {
				uni.previewImage({
					urls: this.petmarket.swiperList,
				})
			},
			async sendMsg(e) {
				this.text = e.detail.value
				// console.log(this.text.length, 'text')
				if (this.text.length > 25) {
					this.$refs.uToast.show({
						type: 'error',
						message: "字数不能大于25",
					})
				}
				let noReg = uni.getStorageSync("noReg")
				if(!noReg){
					uni.navigateTo({
						url: "/subpack/regist/regist"
					})
					return
				}
				let res = null
				if (this.show) {
					res = await wx.cloud.callFunction({
						name: 'logins',
						data: {
							useName: 'postSessionToFound',
							id: this.id,
							talk: this.text,
							date: this.$formatDateTime(new Date(), 1)
						}
					})
				} else {
					res = await wx.cloud.callFunction({
						name: 'logins',
						data: {
							useName: 'postSessionToSale',
							id: this.id,
							talk: this.text,
							date: this.$formatDateTime(new Date(), 1)
						}
					})
				}
				this.text = ''
				this.getData()
			},
			concat() {
				let callNum = uni.getStorageSync('quotaLeft')
				if (callNum == 0) {
					uni.showToast({
						mask: true,
						icon: "error",
						title: "今日次数已用尽"
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '每天仅可拨打2次',
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: this.petData.tel, //仅为示例
								success: (res) => {
									callNum--
									uni.setStorageSync('quotaLeft', callNum)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			buy() {
				this.$refs.uToast.show({
					type: 'error',
					message: "购买",
				})
			},
			async getData() {
				let res = null
				if (this.show) {
					res = await wx.cloud.callFunction({
						name: 'logins',
						data: {
							useName: 'searchFound',
							id: this.id,
						}
					})
				} else {
					res = await wx.cloud.callFunction({
						name: 'logins',
						data: {
							useName: 'searchPet',
							id: this.id,
						}
					})
				}
				this.petmarket = res.result
				// console.log("res:", res.result)
			}
		},
		components: {
			sectioncom
		}
	}
</script>

<style lang="scss">
	.localdetail {
		.content {
			background-color: $uni-color-primary;
			border-radius: $uni-border-radius-lg;
			color: white;
			min-height: 800rpx;
			padding: $uni-spacing-row-base;

			.name,
			.date {
				font-weight: 600;
				font-size: $uni-font-size-base;
			}

			.detailbox {
				margin-top: $uni-spacing-row-base;
				padding: $uni-spacing-row-base;
				background-color: white;
				color: #000;
				font-weight: 600;
				border-radius: $uni-border-radius-lg;
				min-height: 200rpx;
				max-height: 600rpx;
				overflow-y: auto;
			}

			.section {
				.text {
					font-size: $uni-font-size-lg;
					margin-top: $uni-spacing-row-base;
					font-weight: 600;
				}


			}

			.metalk {
				margin: $uni-spacing-col-lg $uni-spacing-col-sm;
				align-items: center;

				.input {
					background-color: white;
					color: #000;
					height: 100rpx;
					padding-left: 24rpx;
					border-radius: $uni-border-radius-base;
				}
			}
		}
	}
</style>